<script setup>
import NavBar from '@/components/NavBar.vue'
import Card from '@/components/Card.vue'
import { userSearchArticleService } from '@/api/article/index.js'
import { userSearchQuestionService } from '@/api/question/index.js'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
const active = ref('课件')
const currentPage = ref(1)
const totalPages = ref(0)
const route = useRoute()
const dataList = ref([])
const isLoading = ref(false)
const name = ref(`搜索: ${route.query.queryName || route.query.queryUploader}`)
async function searchForArticle() {
  let response
  if (route.query.queryName) {
    router.push(
      `/search-list?page=${currentPage.value}&pageSize=6&queryName=${route.query.queryName}&module=${active.value}`
    )
    response = await userSearchArticleService(currentPage.value, '6', route.query.queryName, null)
  }
  if (route.query.queryUploader) {
    router.push(
      `/search-list?page=${currentPage.value}&pageSize=6&queryUploader=${route.query.queryUploader}&module=${active.value}`
    )
    response = await userSearchArticleService(
      currentPage.value,
      '6',
      null,
      route.query.queryUploader
    )
  }
  dataList.value = response.data.data.records
  console.log(dataList.value)
  totalPages.value = response.data.data.pages
}
async function searchForQuestion() {
  let response
  if (route.query.queryName) {
    router.push(
      `/search-list?page=${currentPage.value}&pageSize=6&queryName=${route.query.queryName}&module=${active.value}`
    )
    response = await userSearchQuestionService(
      currentPage.value,
      '6',
      route.query.queryName,
      null,
      '1'
    )
  }
  if (route.query.queryUploader) {
    router.push(
      `/search-list?page=${currentPage.value}&pageSize=6&queryUploader=${route.query.queryUploader}&module=${active.value}`
    )
    response = await userSearchQuestionService(
      currentPage.value,
      '6',
      null,
      route.query.queryUploader,
      '1'
    )
  }

  dataList.value = response.data.data.records
  console.log(dataList.value)
  totalPages.value = response.data.data.pages
}
onMounted(async () => {
  searchForArticle()
})
async function onSwitchPage() {
  if (active.value === '课件') {
    await searchForArticle()
  }
  if (active.value === '需求') {
    await searchForQuestion()
  }
}
async function onClickTab() {
  //在 onClickTab 中，你在切换 tab 时立即发起了数据请求。这意味着在 searchForArticle 或 searchForQuestion 请求过程中，Vue 可能会尝试重新渲染组件，而此时的数据可能尚未完全返回，导致 props.object 中的数据结构不完整，出现 undefined 错误。
  isLoading.value = true // 开始加载
  currentPage.value = 1 //重置页码数
  console.log(active.value)
  if (active.value === '课件') {
    await searchForArticle()
  }
  if (active.value === '需求') {
    await searchForQuestion()
  }
  isLoading.value = false
  //console.log(active.value);
}
</script>
<template>
  <div class="container">
    <NavBar :name="name"></NavBar>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="课件" name="课件"></van-tab>
      <van-tab title="需求" name="需求"></van-tab>
    </van-tabs>
    <div v-if="!isLoading && active === '课件'">
      <Card
        class="card"
        v-for="(object, index) in dataList"
        :object="object"
        type="课件"
        :key="index"
      ></Card>
    </div>
    <div v-if="!isLoading && active === '需求'">
      <Card
        class="card"
        v-for="(object, index) in dataList"
        :object="object"
        type="需求"
        :key="index"
      ></Card>
    </div>
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      @change="onSwitchPage"
      :show-page-size="5"
      force-ellipses
      class="page"
    />
  </div>
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* 添加边框 */
  margin-bottom: 2rem; /* 在垂直方向上设置间距 */
  padding: 10px; /* 可选：为卡片内容添加一些内边距 */
  border-radius: 5px; /* 可选：给边框添加圆角 */
}
.card {
  margin: 0.75rem; /* 12px */
  margin-bottom: 0.5rem; /* 8px */
}
.page {
  margin-bottom: 2rem;
}
</style>
